<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>投诉评价</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">


    <link rel="stylesheet" href="./public/css/ansicht.css">
    <!-- 阿里图标 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_461630_jcxm7ciaxtl9dx6r.css">
    <link rel="stylesheet" href="./public/css/self.css">


</head>
<body>

<div class="page-group">
    <div class="page page-icons" id="page-from">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left back" href="javascript:history.go(-1)">
                <span class="iconfont icon-fanhui1"></span>
                返回
            </a>
            <h1 class="title">投诉评价</h1>
        </header>
        <div class="page-content self-list-block">
            <form method="post" action="" id="formData" enctype="multipart/form-data">
                <div class="list-block">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <!-- 隐式传递的值 -->
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">是否满意</div>
                                    <div class="item-input">
                                        <select>
                                            <option value="0">满意</option>
                                            <option value="1">不满意</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-inner item-border">
                                    <div class="item-title label">评价内容</div>
                                    <div class="item-input self-item-input">
                                        <textarea name="content" placeholder="请输入评价内容"
                                                  onkeyup="getVal(this)"></textarea>
                                        <label class="self-icon-del iconfont icon-delete_fill"
                                               onclick="delVal(this)"></label>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block">
                    <a href="javascript:;" class="button button-big button-fill button-danger" onclick="verify();"
                       id="submit" interAPI="api/wxapi/workorder/orderreply" type="1" name="evaluate">提交</a>
                </div>
            </form>

        </div>
        <!-- ----------------------- -->
    </div>
</div>

<script src="./public/js/jquery-3.2.1.min.js"></script>
<script src="./public/js/ansicht.js"></script>
<script src="./public/js/self.js"></script>

<script>
    //录音上传
    $(function () {
        $("#audioInput").change(function () {
            console.log(this.files[0].name)
            var objUrl = getObjectURL(this.files[0]);
            $("#audio").attr("src", objUrl);
            $("#audio")[0].pause();
            $("#upaudio").hide();
            $("#audioInput").hide();
            $("#audio").show();
            $("#mp3_submit").show()
            getTime();
        });
        $("#vedioInput").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            $("#vedio").attr("src", objUrl);
            $("#vedio")[0].pause();
            $("#upvedio").hide();
            $("#vedioInput").hide();
            $("#vedio").show();
            $("#mp3_submit").show()
            getTime();
        });
    });

    <!--获取mp3文件的时间 兼容浏览器-->
    function getTime() {
        setTimeout(function () {
            var duration = $("#audio")[0].duration;
            if (isNaN(duration)) {
                getTime();
            }
            else {
                console.info("该歌曲的总时间为：" + $("#audio")[0].duration + "秒")
            }
        }, 10);
    }

    <!--把文件转换成可读URL-->
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
</script>


<script type="text/javascript">

    /*
    * 图片上传
    */

    //限制上传张数
    $('.z_file').click(function () {
        if ($('.z_addImg').length > 2) {
            return false;
        }
    })

    //px转换为rem
    /*
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 640) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    }
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    */
    function imgChange(obj1, obj2) {

        //获取点击的文本框
        var file = document.getElementById("file");
        //存放图片的父级元素
        var imgContainer = document.getElementsByClassName(obj1)[0];
        //获取的图片文件
        var fileList = file.files;
        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[0];
        var imgArr = [];
        //遍历获取到得图片文件
        for (var i = 0; i < fileList.length; i++) {
            var imgUrl = window.URL.createObjectURL(file.files[i]);
            imgArr.push(imgUrl);
            var img = document.createElement("img");
            img.setAttribute("src", imgArr[i]);
            var imgAdd = document.createElement("div");
            imgAdd.setAttribute("class", "z_addImg");
            imgAdd.appendChild(img);
            imgContainer.appendChild(imgAdd);
        }
        ;
        imgRemove();
    };

    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function () {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function () {
                    mask.style.display = "none";
                };
                sure.onclick = function () {
                    mask.style.display = "none";
                    t.style.display = "none";
                };

            }
        }
        ;
    };


</script>
</body>
</html>